{include file="index@public/header" /}
<style>
    .memList{
        position: absolute;
        top: 3em;
        width: 96%;
        margin: 5% 2%;
        overflow: auto;
        height: 550px;
        overflow-x:hidden
    }
    .memList select{
        margin: .5em;
        border-radius: .2em;
        height: 2.3em;
        border: 1px solid #ccc;
        background: #fff;
    }
    .memList .pager li:first-child{
        float:left;
    }
    .memList .pager li:last-child{
        float:right;
    }
    /*瀑布流层*/
    .memList .waterfall{
        -moz-column-count:2; /* Firefox */
        -webkit-column-count:2; /* Safari 和 Chrome */
        column-count:2;
        -moz-column-gap: 1em;
        -webkit-column-gap: 1em;
        column-gap: 1em;
    }
    /*一个内容层*/
    .memList .item{
        -moz-page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
    }
    .memList .item img{
        width: 110%;
        position: relative;
        left: -.3em;
    }
</style>
<div class = "memList">
    <div class = "row">
        <select class = "col-xs-3" name = "sex">
            <option value = "33" selected>性别</option>
            <option value = "0">女</option>
            <option value = "1">男</option>
        </select>
        <select class = "col-xs-3" name = "height">
            <option value = "33" selected>身高</option>
            <option value = "100,160">160cm以下</option>
            <option value="160,165">160-165cm</option>
            <option value="165,170">165-170cm</option>
            <option value="170,175">170-175cm</option>
            <option value="175,180">175-180cm</option>
            <option value="180,185">180-185cm</option>
            <option value="185,250">185cm以上</option>
        </select>
        <select class = "col-xs-3" name = "xueli">
            <option value = "33" selected>学历</option>
            <option value = "0">初中及以下</option>
            <option value = "1">高中（或中职）</option>
            <option value = "2">大专</option>
            <option value = "3">本科</option>
            <option value = "4">研究生</option>
            <option value = "5">博士及以上</option>
        </select>
        <button class = "btn btn-primary" style = "position:absolute;top:.4em;" onclick = "tijiao()">搜索</button>
    </div>
    <div class="waterfall"></div>
    <ul class="pager">
        <li class = "previous"  onclick = "page(-1,$(this))"><a href="#">上一页</a></li>
        <input type = "hidden" id = "current" value = "1"/>
        <li class="next"  onclick = "page(1,$(this))"><a href="#">下一页</a></li>
    </ul>
</div>
<script type="text/javascript">
    $(function(){
        $("li:not('ul li:first-child,ul li:last-child,.active')").css('display','none');
    })
    function page(num,object){
        /*判断按钮是否可用*/
        if(object[0].className.indexOf('disabled')>0){
            $.messager.show('暂无数据', {placement: 'center',type:'success'});
        }
        /*获取当前页数值*/
        var current = Number($("#current").val())+Number(num);
        $("#current").val(current);
        tijiao(current);
    }
    function tijiao(cur){
        cur = cur? cur:1;
        $.ajax({
            data: {'sex':$("select[name = 'sex']").find('option:selected').val(),'height':$("select[name = 'height']").find('option:selected').val(),'xueli':$("select[name = 'xueli']").find('option:selected').val(),'current':cur},
            cache:false,
            type: "post",
            url: '/index/index/memshai',
            dataType: 'json',
            success: function (datas){
                if (datas['result'].length > 0){
                    /*设置第一页和最后一页的状态*/
                    1 == datas['cur']? $('.previous').addClass('disabled'):$('.previous').removeClass('disabled');
                    (datas['cur'] == datas['total'])? $('.next').addClass('disabled'):$('.next').removeClass('disabled');
                    $(".waterfall").empty();
                    /*遍历并添加图片*/
                    for(var i=0;i<datas['result'].length;i++){
                        $(".waterfall").append("<div class = 'item' onclick = 'tiaoz("+datas['result'][i].uid+")'><img src = '"+datas['result'][i].shpic01+"'/></div>");
                    }
                }else{
                    $.messager.show('暂无数据', {placement: 'center',type:'success'});
                }
             }
         });
    };
    function tiaoz(uid){
        window.location.href='{:url("index/Oneself/selfDetail")}?id='+ uid ;//解析成功
    }
    tijiao();
</script>
{include file="index@public/footer" /}